<template>
	<view class="content" @click="go('/pages/appraisalOEM/index')" >
		<ModuleHeader :title="'鉴定代工'" moreText="线下实物查验 全程有记录 专业有保障" :ifShowMore="true">
			<template v-slot:tab>
				<u-icon name="arrow-right" color="#131313"></u-icon>
			</template>
			<template>
				<view class="OME">
					<view class="oneOME OME-box">
						<p class="title">专业团队</p>
						<view class="oneOME-box">
							<img src="@/static/images/home/OEM.jpg" />
							<img src="@/static/images/home/OEM.jpg" />
							<view class="leiji dis_f_l_c">
								<text style="font-size: 22rpx;">累计鉴定</text>
								<view style="font-size: 32rpx;">{{ num }}</view>
							</view>
						</view>
					</view>
					<view class="twoOME OME-box">
						<p class="title">高精设备</p>
						<img src="@/static/images/home/OEMdown.jpg" />
						<img src="@/static/images/home/OEMdown.jpg" />
					</view>
					<view class="threeOME OME-box">
						<p class="title">准确稳定</p>
						<img src="@/static/images/home/OEM.jpg" />
					</view>
				</view>
			</template>
		</ModuleHeader>
	</view>
</template>
<script>
	import ModuleHeader from "@/components/ModuleHeader.vue";

	export default {
		name: "IdentificationOEM",
		components: {
			ModuleHeader,
		},
		props: {
			num: {
				type: Number,
			},
		},
		data() {
			return {};
		},
		methods: {
			go(e){
				uni.switchTab({
					url:e
				})
			}
		},
		created() {},
		mounted() {},
	};
</script>
<style lang="scss" scoped>
	.leiji {
		// max-width: 88rpx;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 36rpx;

	}

	.content {
		padding: 30rpx 0;

		.OME {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;

			.OME-box {
				padding: 30rpx 20rpx;
				border-radius: 6px;
			}

			.title {
				font-size: 24rpx;
				font-weight: 700;
				color: #131313;
				margin-bottom: 20rpx;
			}

			.oneOME {
				width: 45%;
				background: linear-gradient(180deg, #e1e9f7 0%, #fbfbfb 100%);

				.oneOME-box {
					display: flex;
					align-items: center;
					justify-content: space-around;

					img {
						width: 54rpx;
						height: 80rpx;
					}

					view {
						display: flex;
						flex-direction: column;
						align-items: center;
						color: #131313;
						font-weight: 700;
						font-size: 32rpx;

						text {
							color: #a1a1a1;
							font-size: 22rpx;
							font-weight: 400;
						}
					}
				}
			}

			.twoOME {
				width: 25%;
				background: linear-gradient(180deg, #e1e9f7 0%, #fbfbfb 100%);
				display: flex;
				flex-direction: column;
				align-items: center;

				img {
					width: 80rpx;
					height: 32rpx;
					margin-bottom: 20rpx;
				}
			}

			.threeOME {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				background: linear-gradient(180deg, #e1e9f7 0%, #fbfbfb 100%);

				img {
					width: 27px;
					height: 40px;
				}
			}
		}
	}
</style>